<template>
    <div :class="`tech-review-order-item ${mode}`">
        <div class="review-order-item-title">{{ itemInfo.name }}</div>
        <div class="review-order-list">
            <template v-for="product in itemInfo.list">
                <ReviewGoods :itemInfo="product" :key="product.id" :isDisable="false" />
            </template>
        </div>
        <LabelLine title="配送费" :value="itemInfo.deliveryPrice / 100" :isPrice="true" />
        <LabelLine v-if="activityValue" title="满减活动" :value="activityValue" :isPrice="true" :isNegative="true" :isTheme="true" />
        <LabelLine title="优惠券" :value="couponValue" placeholder="不使用优惠券" :isTheme="true" :isLink="true" @click="changeCoupon" />
        <!-- 备注 -->
        <LabelLine title="备注" :value="itemInfo.remark || '无备注'" placeholder="选填" :isTheme="true" :isLink="true" @click="changeRemark" />
        <div class="discount-cut-line">
            <div class="border-line"></div>
        </div>
        <!-- 总价 -->
        <ReviewTotalPrice :discount="itemInfo.totalDiscountPrice / 100" :price="itemInfo.totalPrice / 100" />
        <TechDialog ref="remark" title="订单备注" extClass="tech-review-remark-dailog" @ok="ensureChangeRemark" container="body">
            <div class="remark-content">
                <Field class="review-remark-field border-black-color" v-model="remark" type="textarea" placeholder="请填写备注" @blur="inputOnBlur" :autofocus="true" :maxlength="50" />
                <span class="review-remark-length">{{remarkLength}} / 50个字</span>
            </div>
        </TechDialog>
        <ReviewChooseCoupon ref="coupon" :couponList="itemInfo.couponList" :useCoupon="itemInfo.useCoupon" @ensure="ensureChangeCoupon" />
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import { Field } from 'vant';
import { TechCell, TechDialog } from '@components/base';
import { LabelLine } from '@components/shop';
import ReviewRemark from './ReviewRemark';
import ReviewGoods from './ReviewGoods';
import ReviewTotalPrice from './ReviewTotalPrice';
import ReviewChooseCoupon from './ReviewChooseCoupon';
import ModeMixin from '@common/mixin';
import { inputBlurAction } from '@common/utils';
import logger from '@common/logger';

export default {
    name: 'ReviewOrderItem', // 订单项
    mixins: [ModeMixin],
    components: {
        TechCell,
        TechDialog,
        Field,
        LabelLine,
        ReviewRemark,
        ReviewGoods,
        ReviewTotalPrice,
        ReviewChooseCoupon,
    },
    props: {
        itemInfo: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            deliveryType: -1,
            defaultDayValue: '',
            remark: '',
        };
    },
    computed: {
        remarkLength() {
            return this.remark.length || 0;
        },
        activityValue() {
            const { itemInfo } = this.$props;
            return itemInfo.discountInfo && itemInfo.discountInfo.activityDiscount / 100;
        },
        couponValue() {
            const { itemInfo } = this.$props;
            const len = itemInfo.useCoupon && itemInfo.useCoupon.length || 0;
            const price = itemInfo.discountInfo && itemInfo.discountInfo.couponDiscount || 0;
            return  len > 0 ? `使用${len}张，-￥${price / 100}`: '';
        },
    },
    methods: {
        ...mapActions([
            'changeOrderReviewItemCoupon',
            'changeOrderReviewItemRemark',
        ]),
        inputOnBlur() {
            inputBlurAction();
        },
        // 选择优惠券
        changeCoupon() {
            this.$refs.coupon.show();
        },
        ensureChangeCoupon(useCoupon) {
            this.changeOrderReviewItemCoupon({
                id: this.itemInfo.id,
                useCoupon,
            });
        },
        changeRemark() {
            const { itemInfo } = this.$props;
            this.remark = itemInfo.remark;
            this.$refs.remark.show();
        },
        ensureChangeRemark() {
            const { itemInfo } = this.$props;
            this.changeOrderReviewItemRemark({
                id: itemInfo.id,
                remark: this.remark,
            });
        },
    },
};
</script>

<style lang="less">
.tech-review-order-item {
    .m-h(@gap-md);
    .mode-white();
    .p(@gap-md);
    .m-b(@gap-md);
    .radius-and-shandow();
    .review-order-item-title {
        font-size: @font-size;
        font-weight: 500;
        .m-b(@gap);
    }
    .discount-cut-line {
        .m-t(@gap-sm);
        height: 1px;
        // .p-h(@gap-md);
        .card-circle-border-h(13px, 6px, 19px, @shop-bg-color);
        .border-line {
            .m-b(10px);
            height: 1px;
            background-color: @border-color;
            width: 100%;
        }
    }
    &.black {
        background-color: #000000;
        .discount-cut-line {
            .card-circle-border-h(13px, 6px, 19px, #000);
            .border-line {
                background-color: rgba(125,125,131,0.2);
            }
        }
    }
}
.tech-review-remark-dailog {
    .dialog-content {
        width: calc(100% - 2 * @shop-gap-md);
    }
    .remark-content {
        position: relative;
        // background-color: aquamarine;
        .review-remark-field {
            width: 100%;
            height: 98px;
            border: @border;
            border-radius: @border-radius;
        }
        .review-remark-length {
            position: absolute;
            bottom: @gap;
            right: @gap;
            color: @tip-color;
            opacity: .7;
            font-size: @shop-font-size-sm;
        }
    }
}
</style>
